<template>
  <view class="app-container">
    <view class="top-row">
      <view>
        <u-checkbox @change="currentChange" v-model="currentProduct" label-size="30" shape="circle"
          active-color="#539A8B">只看当前商品
        </u-checkbox>
      </view>
      <view style="text-align: right;color: #999999;">好评度{{ 99 }}%</view>
    </view>
    <view class="comment-list">
      <view class="comment-item" v-for="comment in commentList" :key="comment.id">
        <!-- 评价顶部 -->
        <view class="top">
          <view class="left">
            <view>
              <u-image width="40rpx" height="40rpx" shape="circle"
                :src="comment.memberIcon != null && comment.memberIcon != '' ? comment.memberIcon : '/static/tab-my.png'">
              </u-image>
            </view>
            <view style="margin: 0 10rpx;">{{ comment.memberNickName }}</view>
            <view>
              <u-rate :count="5" v-model="comment.star" size="26" disabled></u-rate>
            </view>
          </view>
          <view style="flex: 1;color: #999999;text-align: right;">{{ comment.createTime }}</view>
        </view>
        <!-- 评论文字 -->
        <view style="margin: 30rpx 0;">{{ comment.content }}</view>
        <view v-if="comment.resources != null && comment.resources.length > 0">
          <video v-if="comment.resources[0].type == 'mp4'" :src="comment.resources[0].url" controls></video>
          <view class="media-group">
            <u-image v-if="item.type != 'mp4'" v-for="(item,i) in comment.resources" :key="i" width="150rpx"
              height="150rpx" :src="item.url" style="margin: 5rpx 15rpx 10rpx 0;" @click="previewImg(item.url)">
            </u-image>
          </view>
        </view>
        <view class="bottom">
          <view style="color: #999999;flex: 3;">{{ loadAttribute(comment.spuAttributes) }}</view>
          <view class="right-reply" @click="toDetail(comment.id)">
            <view>
              <u-image width="38rpx" height="38rpx" src="/static/image/reply.png"></u-image>
            </view>
            <view> {{ 1 }} 回复</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        skuId: null,
        spuId: null,
        // 是否已加载完成
        finished: false,
        // 仅查看当前商品评价
        currentProduct: true,
        queryParam: {
          page: 1,
          size: 20,
          skuId: null,
          spuId: null
        },
        // 评价列表
        commentList: []
      }
    },
    watch: {
      currentProduct(newVal, oldVal) {  // 是否查看当前商品评价
        this.queryParam.page = 1;
        this.queryParam.spuId = newVal ? this.spuId : '';
        this.getCommentList();
      }
    },
    onLoad(e) {
      this.queryParam.skuId = this.skuId = e.skuId;
      this.getCommentList();
    },
    methods: {
      // 获取商品评价列表
      getCommentList() {
        let that = this;
        try {
          this.$api.request.spuCommentList(this.queryParam, res => {
            if (that.queryParam.page == 1) {
              that.commentList = [];
            }
            res.data.records.forEach(item => {
              item.resources = JSON.parse(item.resources);
              that.commentList.push(item);
            })
            if (that.queryParam.page >= res.data.pages) {
              that.finished = true;
            }
          })
        } catch (e) {
          console.log(e);
        }
      },
      toDetail(commentId) {
        uni.navigateTo({
          url: "/pages/sys/home/commentDetail?commentId=" + commentId
        })
      },
      // 拉到底部 触发加载新一页商品
      onReachBottom() {
        if (this.finished) {
          return this.$u.toast("没有更多了...");
        }
        this.queryParam.page++;
        this.getCommentList();
      },
      // 图片预览
      previewImg(url) {
        uni.previewImage({
          current: 0,
          urls: [url]
        })
      },
      // 解析属性串
      loadAttribute(spuAttributes) {
        let result = "";
        if (spuAttributes == null || spuAttributes.length <= 0) {
          return result;
        }
        let data = JSON.parse(spuAttributes);
        data.forEach(item => result += item.key + "：" + item.value + "，");
        return result.substring(0, result.length - 1);
      }
    },
  }
</script>

<style lang="scss" scoped>
  .app-container {
    color: #303133;

    .top-row {
      display: flex;
      padding: 20rpx;
      background-color: #FFFFFF;
      border-bottom: #D9D9D9 1rpx solid;

      view {
        flex: 1;
        line-height: 50rpx;
      }

      /deep/ .u-checkbox__icon {
        height: 42rpx !important;
        width: 42rpx !important;
      }
    }

    .comment-list {
      padding: 20rpx;
      background-color: #FFFFFF;

      .comment-item {
        padding: 10rpx 0;
        border-bottom: #D9D9D9 1rpx solid;

        .top {
          display: flex;

          .left {
            flex: 2;
            display: flex;
            line-height: 40rpx;
          }
        }

        .media-group {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
        }

        /deep/ uni-video {
          width: 100%;
        }

        .bottom {
          display: flex;

          .right-reply {
            flex: 1;
            display: flex;
            color: #539A8B;
            line-height: 38rpx;
            justify-content: right;
          }
        }
      }
    }
  }
</style>
